/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react/jsx-no-bind */
import React, { forwardRef, useState } from 'react';
import { Row, Col, Checkbox, Input, Form, Select } from 'antd';

const FormItem = Form.Item;

const MixInModalItem = forwardRef((props, ref) => {
  const { onChange, value = {}, commonBrands = [] } = props;

  const { checked, platform, username, password, platform_brand = [] } = value;

  const [disabled, setDisabled] = useState(!checked);

  const handleChangeValue = (key, item) => {
    if (onChange) {
      onChange({
        ...value,
        [key]: item,
      });
    }
  };

  const handleCheckBoxChange = e => {
    setDisabled(!e.target.checked);
    handleChangeValue('checked', e.target.checked);
  };

  const handleInputChange = (type, e) => {
    handleChangeValue(type, e.target.value);
  };

  const handleSelect = selected => {
    handleChangeValue('platform_brand', selected);
  };

  return (
    <Row type="flex">
      <Col span={3}>
        <Checkbox onChange={handleCheckBoxChange} checked={checked}>
          {platform}
        </Checkbox>
      </Col>
      {checked && (
        <>
          <Col span={7}>
            <FormItem
              label="账号"
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 18 }}
              style={{ marginBottom: 0 }}
            >
              <Input
                onChange={handleInputChange.bind(null, 'username')}
                value={username}
                disabled={disabled}
                placeholder="请输入账号"
                allowClear
              />
            </FormItem>
          </Col>
          <Col span={7}>
            <FormItem
              label="密码"
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 18 }}
              style={{ marginBottom: 0 }}
            >
              <Input.Password
                onChange={handleInputChange.bind(null, 'password')}
                value={password}
                disabled={disabled}
                placeholder="请输入密码"
                allowClear
              />
            </FormItem>
          </Col>
          <Col span={7}>
            <FormItem
              label="品牌"
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 18 }}
              style={{ marginBottom: 0 }}
            >
              <Select
                disabled={disabled}
                onChange={handleSelect}
                mode="multiple"
                value={platform_brand}
                placeholder="请选择品牌"
              >
                {commonBrands.map(v => (
                  <Select.Option key={v.value} value={v.value}>
                    {v.label}
                  </Select.Option>
                ))}
              </Select>
            </FormItem>
          </Col>
        </>
      )}
    </Row>
  );
});

export default MixInModalItem;
